<template>
  <a-modal
      class="import-container"
      v-model="show"
      :title="title"
      :width="800"
      @cancel="handleCancel"
      :destroyOnClose="true"
      :maskClosable="false"
      :keyboard="false"
      :footer="null">
    <div class="import-layout">
      <div class="step-content">
        <file-upload
          v-if="curStep === 0"
          :accept="accept"
          :action="action"
          @nextStep="nextStep"
          />
        <file-validate
          v-else-if="curStep === 1"
          ref="fileValidate"
          :uploadResult="uploadResult"
          @handleCancel="handleCancel"
          @prevStep="prevStep"
          @nextStep="nextStep"
        />

        <file-import
          v-else-if="curStep === 2"
          :uploadResult="uploadResult"
          :validResult="validResult"
          @handleCancel="handleCancel"
        />
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts">
import { Button, Modal, Steps } from '@h3/antd-vue';
import {
  Component, Prop, Vue
} from 'vue-property-decorator';
import FileImport from './file-import.vue';
import FileUpload from './file-upload.vue';
import FileValidate from './file-validate.vue';




@Component({
  name: 'DataImport',
  components: {
    AModal: Modal,
    ASteps: Steps,
    AStep: Steps.Step,
    AButton: Button,
    FileUpload,
    FileValidate,
    FileImport
  }
})

export default class DataImport extends Vue {
  @Prop() value!: any;

  @Prop() accept!: any;

  @Prop() action!: any;

  show = true;

  curStep: number = 0; // 当前步骤

  uploadResult: any = {}  //上传界面中间数据

  validResult: any = {} //校验页面中间数据

  title: string = '导入-模型'

  /**
   * 关闭弹窗重置
   */
  reset() {
    this.curStep = 0;
    this.show=false;
  }

  /**
   * 关闭弹窗
   */
  handleCancel() {
    this.$emit('importEnd', false);
    this.reset();
  }

  /**
   * 上一步
   */
  preStep() {
    this.curStep -= 1
  }

  /**
   * 下一步
   */
  nextStep(result) {
    if(this.curStep === 0)
      this.uploadResult = result
    else if(this.curStep === 1)
      this.validResult = result
    this.curStep += 1
  }

  /**
   * 关闭弹窗
   */
  closeModal() {
    this.$emit('input', false);
  }
}
</script>

<style lang="less">
.import-container {
  & .import-layout {
    .data-upload{
      width: 80%;
      margin: 16px auto;
    }
    & .steps {
      width: 50%;
      margin: 30px auto;
    }
    .ant-table table{
      border: 1px solid #E9E9E9;
      border-bottom: none;
    }
    .ant-table-thead > tr > th{
      padding: 8px 10px;
    }
    .ant-table-tbody > tr > td{
      padding: 4px 10px;
    }
  }
}
</style>

<style lang="less" scoped>
  /deep/ .ant-modal-body {
    padding: 0;
  }
  /deep/ .modal-footer {
    padding: 10px 16px;
    text-align: right;
    background: transparent;
    border-top: 1px solid #e8e8e8;
    border-radius: 0 0 4px 4px;
  }

  /deep/ .modal-body {
    margin: 24px;
    min-height: 300px;
    position: relative;
  }
</style>
